<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="fr">     
<head>         
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         
<title>Création d'un design à 2 colonnes - 1. Le code XHTML</title>  <!--[if lte IE 6]>   
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />   <![endif]-->   
<link rel="stylsheet" type="text/css" href='http://wiki.klniox.googlecode.com/git-history/master/gh-pages/stylesheet/colorize.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">   
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">  
<link rel="stylsheet" type="text/css" href='http://wiki.klniox.googlecode.com/git-history/master/gh-pages/stylesheet/colorize.css'>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
</head>     
<body>         
<div id="header" style="width:100%;height:29px;border-top:6px outset #8987c9;background-color:#568496">  
 <span class="glyphicon glyphicon-name"></span>

<div class="containernumb4">
  <h6 style="color:#ccc;font-size:0.8:font-family:impact;">Le forum des textes d'Aventures nouvelles ... Personnages mis en situation </h6>

  <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-primary">Primary</button>   
</div>


 <hr>
  <h4 style="font-family:courier;color:#4385fe;">D'Klniox Chicago tribune .. <br>les raids éffectués par le  gang continue</h4> 
</div>         
  <div id="center" style="border:2px inset #787856;margin-top:73px;color:#231912:">  Détective brigades spéciales et fédéraux sont sur le pied de guerre       <p>    </p>              

<div id="content"   style="border:2px inset #787856;" >        
  <h2 style="color:#cc6565;">world center tribune</h2>                 
<img src='http://www.imcdb.org/i442026.jpg' width ="129px" />
<img src='http://ecx.images-amazon.com/images/I/31BcDXE672L.jpg' width="229px"/>
   <img src='http://media-1.web.britannica.com/eb-media/29/134829-004-BDAA37D8.jpg' width="129px"/>
    <img src='http://www.mundoplus.tv/img/e0cdb8292d132424a30dae97bbdef39f' width="129px"/>
   <img src='http://www.dunwich.org/tv/untoucha/unteliot.gif' width="129px"/>

<p>La page est divisée horizontalement en trois parties distinctes :</p>                 
<ol>                     
<li>l'en-tête (identifié par "<em>header</em>"),</li>                     
<li>la partie centrale ("<em>center</em>", <em>sidebar</em> et <em>content</em>).</li>                     
<li>le pied de page ("<em>footer</em>") li>                 
</ol>   
               
<h2>Brèves</h2> 
         
</div><!-- #content --> 
<style>  
html, body {     height: 100%;     margin: 0;     padding: 0; } 
body {     min-height: 100%;     width: 850px;     padding: 0 10px;     margin: 0 auto;     position: relative; } 
div#center {     /* Pour éviter la superposition du pied de page et du contenu : */     padding-bottom: 50px;  } 
div#footer {     position: absolute;     width: 750px;     bottom: 0;     left: 10px;     } 
div#content {     float: left;     width: 530px; } 

div#sidebar {     float: right;     width: 200px; border:2px stride #f95637;}  
div#center {padding-bottom: 50px;overflow: auto;}   
  div#sub_ideo{padding-bottom: 50px;width: 530px;overflow: auto;border:4px stride #f95637;}
  div#sub_content{float: left;width: 382px;border:4px stride #f95637;}
  div#sub_sidebar{float: right;width: 120px; border:4px stride #f95637;}

#navibar{background-color:#cfc6fe;width:760px;height:1010px;margin-left:139px;padding-left:49px;position:absolute};      
  ul.b{display:inline;list-style:none;}      
  #me{border:2px outset #7676fe;background-color:#61e;color:#13f9fe;font-size:0.7em;font-family:courier;width:147px;height:210px;position:absolute;float:right;margin-right:34px;padding-left:2px;margin-top:82px;padding-right:2px;z-index:12;}   
  #metin li{border:2px outset #ffe;background-color:#ADD8E6;color:#4527fe;font-size:1.2em;font-family:courier;height:21px;}
  #metin li :hover{border:2px outset #7e55fe;background-color:#566C73;color:#DEEFF5;font-size:1.2em;font-family:courier;}
  hetblog a{color:#1165fe;border:2px inset #2356fe;}      
.hetblog a:hover{color:#fff;background-color:#565656;cursor:pointer;}   
  .erto{border:2px outset #6fe;background-color:#ee6611;color:#165328;width:94px;height:32px;margin-right:4px;margin-left:2px;padding-right:2px;padding-left:2px;   display:inline;list-style:none;font-size:1.2em;font-family:courier;float:left; }  
.erto:hover{border:2px inset #ffe;background-color:#ff9933;color:#895;width:94px;height:32px;margin-right:4px;margin-left:2px;padding-right:2px;padding-left:2px;}
.e888rto{background-image: url('https://plus.google.com/photos/111741255128593878074/albums/5904973748673897681?authkey=CJSx2_6DvKinIQ' );background-repeat:no-repeat;background-size:100% 121px;}   
.erto a:hover{color:#379;}

.kleft{border:2px outset #38e;}   
.well{border:2px outset #619467;margin-right:104px;}   


</style>               
<div id="sidebar" style="border:2px inset #787856;">SIDEBAR                
<h2>Navigation</h2>                 
<ul id="metin">                     
<li><a href="#" title="Introduction">Introduction</a></li>                     
<li><a href="#" title="Première étape : le code (X)HTML">Etape 1</a></li>                     
<li><a href="#" title="Deuxième étape : le positionnement">Etape 2</a></li>                     
<li><a href="#" title="Troisiéme étape : couleurs & images de fond">Etape 3</a></li>                     
</ul>  
  <div style="border:2px groove #cc6565;font-familly:impact;padding-left:6px;padding-right:6px;color:#cc6565; ">Wels Fargo<br>Last text<br>new paper
<hr>
<hr>
G.KEENESTHAN
</div>
               
<h2>Brèves</h2>                 
<p>Pourquoi j'aime les standards du W3C ? Pour <a href="http://openweb.eu.org/articles/pourquoi_standards/" title="Openweb : Pourquoi les standards du W3C">ça</a></p>                 <h2>Liens</h2>                  
<ul>                     
<li><a href='http://wiki.berlinux.googlecode.com/hg/gh-pages/index.html' title="klniox apprendre XHTML, les CSS et les standards W3C de la conception Web">berlinux</a></li>   
 <li><a href='http://gerauld.googlecode.com/svn/gh-pages/index.html' title="klniox apprendre XHTML, les CSS et les standards W3C de la conception Web">gerauld</a></li>  
 <li><a href='http://wiki.klniox.googlecode.com/git-history/master/gh-pages/index.html' title="klniox apprendre XHTML, les CSS et les standards W3C de la conception Web">klniox</a></li>  
</ul>             </div> <!-- #sidebar -->         
</div><!-- #center --> 
  <hr/>
<p id="receive"></p>   

<div id="footer">             
     
</div><!-- #footer -->     
</body>  
</html> 